<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动视差背景</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/1.png"
            data-speed='-5' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/2.png"
            data-speed='5' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/3.png"
            data-speed='2' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/4.png"
            data-speed='6' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/5.png"
            data-speed='8' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/6.png"
            data-speed='-2' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/7.png"
            data-speed='4' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/8.png"
            data-speed='-9' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/9.png"
            data-speed='6' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/10.png"
            data-speed='-7' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/11.png"
            data-speed='-5' class="layer">
        <img src="https://raw.githubusercontent.com/Samaelish/Background-Parallax-Effect-on-Mousemove/main/12.png"
            data-speed='5' class="layer">
        <h2 class="layer" data-speed="2">Parallax</h2>
    </section>
</body>
<script>
    let cursor = { x: 0, y: 0 }
    let previousTime = performance.now()

    // 更新鼠标位置
    document.addEventListener('mousemove', (e) => {
        cursor.x = e.clientX / window.innerWidth - 0.5
        cursor.y = e.clientY / window.innerHeight - 0.5 
    })

    // 动画循环
    const tick = () => {
        const currentTime = performance.now()
        const deltaTime = (currentTime - previousTime) / 1000 // 转换为秒
        previousTime = currentTime

        document.querySelectorAll('.layer').forEach(layer => {
            const speed = layer.getAttribute('data-speed')
            const parallaxX = cursor.x * speed * 40
            const parallaxY = -cursor.y * speed * 40

            let currentX = parseFloat(layer.style.transform.split('translateX(')[1]?.split('px)')[0]) || 0
            let currentY = parseFloat(layer.style.transform.split('translateY(')[1]?.split('px)')[0]) || 0

            currentX += (parallaxX - currentX) * 5 * deltaTime
            currentY += (parallaxY - currentY) * 5 * deltaTime

            layer.style.transform = `translateX(${currentX}px) translateY(${currentY}px)`
        })

        requestAnimationFrame(tick)
    }

    tick();
</script>

</html>